<!-- 红包中心 -->
<template>
	<view class="container">
		
		<!--tabbar-->
		<view class="tui-tabbar">
			<block v-for="(item,index) in tabbar" :key="index">
				<view class="tui-tabbar-item" :class="[tabCur==index?'tui-item-active':'']" :data-index="index" @tap="tabbarSwitch">
					<view :class="[index==0?'tui-ptop-4':'']">
						<tui-icon :name="tabCur==index?item.icon+'-fill':item.icon" :color="tabCur==index?'#E41F19':'#666'" :size="item.size"></tui-icon>
					</view>
					<view class="tui-scale">{{item.text}}</view>
				</view>
			</block>
		</view>
		<!--tabbar-->
		
		<view class="main-wrap">
			<view class="header">
				<view class="top-nav">
					<view class="top-go-prev" @tap="goPrevPage()">&lt;</view>
					<view class="top-title">签到领好礼</view>
					<view class="top-go-next" @tap="goMyLottery()">
						<image class="top-go-next-img" src="/static/icons/icon_my-sign/go_lottery.png"></image>
					</view>
				</view>
				<view class="my-info">
					<image :src="myImgLogo" class="my-img-logo"></image>
					<view class="my-name">{{myName}}</view>
				</view>
				<view class="my-stat">
					<view class="my-rank">
						<view class="my-stat-tit">今日排行</view>
						<view class="my-stat-val">第{{todayRank}}名</view>
					</view>
					<view class="my-cnt">
						<view class="my-stat-tit">累计签到</view>
						<view class="my-stat-val">{{signSum}}次</view>
					</view>
				</view>
				<view class="my-sign" @tap="postSignIn()">
					<image v-if="hasSignIn == 0" class="sign-btn" src="/static/icons/icon_my-sign/sign_btn.png"></image>
					<image v-if="hasSignIn == 1" class="sign-btn" src="/static/icons/icon_my-sign/sign_btn_had.png"></image>
				</view>
			</view>
			
			<view class="center">
				<view class="rank-title">签到排行榜</view>
				<tui-list-cell v-for="(item,index) in signListRank" :key="index" class="rank-list">
					<view v-if="index == 0" class="rank-num"><image class="rank-num-img" src="/static/icons/icon_my-sign/top1.png"></image></view>
					<view v-if="index == 1" class="rank-num"><image class="rank-num-img" src="/static/icons/icon_my-sign/top2.png"></image></view>
					<view v-if="index == 2" class="rank-num"><image class="rank-num-img" src="/static/icons/icon_my-sign/top3.png"></image></view>
					<view v-if="index > 2" class="rank-num">{{index+1}}</view>
					<view class="rank-logo"><image :src="item.member_logo" class="rank-logo-img"></image></view>
					<view class="rank-name">{{item.member_name}}</view>
					<view class="rank-total">
						<view v-if="index <= 2" class="rank-key-top">{{item.rank_num_cn}}</view>
						<view v-if="index > 2" class="rank-key">{{item.rank_num_cn}}</view>
						<view class="rank-val">{{item.cnt}}天</view>
					</view>
				</tui-list-cell>

			</view>
			
			<view class="footer">
				<view class="sign-list">
					<view class="sign-list-tit">签到记录</view>
					<view class="sign-list-item">
						<view v-for="(item,index) in signListMy" :key="index" class="sign-item">{{item.add_time}}</view>
					</view>
				</view>
			</view>
			
		</view>
	</view>	
</template>

<script>
	import footerMenu from "@/components/footer-menu.vue"
	import tuiIcon from "@/components/thorui/tui-icon/tui-icon.vue"
	import tuiTabs from "@/components/thorui/tui-tabs/tui-tabs"
	import tuiListView from "@/components/thorui/tui-list-view/tui-list-view"
	import tuiListCell from "@/components/thorui/tui-list-cell/tui-list-cell"
	import tuiBadge from "@/components/thorui/tui-badge/tui-badge"
	import tuiButton from "@/components/thorui/tui-button/tui-button"
		
	export default {
		components: {
			footerMenu,
			tuiIcon,
			tuiTabs,
			tuiListView,
			tuiListCell,
			tuiBadge,
			tuiButton
		},
		
		data() {
			return {
				myName: '',
				myImgLogo: '',
				myPhone: '',
				hasSignIn: 0,
				todayRank: 0,
				signSum: 0,
				signId: 0,
				signListMy: [],
				signListRank: [],
				
				loadding: false,
				pullUpOn: true,
				scrollTop: 0,
				
				//底部导航栏tabbar
				tabCur: 3,
				tabbar: [{icon: "home", text: "首页", size: 21}, 
					{icon: "category", text: "分类", size: 24},
					{icon: "cart", text: "购物车", size: 22}, 
					{icon: "people", text: "我的", size: 24}],
			} 
		},
		methods: {
			
			//底部导航栏tabbar
			tabbarSwitch: function(e) {
				let index = e.currentTarget.dataset.index;
				this.tabCur = index;
				if (index == 0) {
					uni.switchTab({ url: '/pages/site/index' })
				} else if (index == 1) {
					uni.switchTab({ url: '/pages/goods/cate' })
				} else if (index == 2) {
					uni.switchTab({ url: '/pages/my-cart/index' })
				} else {
					uni.switchTab({ url: '/pages/my/index' })
				}
			},
			
			
			goPrevPage: function() {
				uni.navigateBack();
			},
			
			//我的订单中心
			goMyLottery: function() {
				let sId = this.signId;
				if(!sId) return false;
				uni.navigateTo({
					url: '/pages/my-lottery/index?type=1&sign_id=' + sId
				})
			},
			
			goMyIndex: function() {
				uni.switchTab({
					url: '/pages/my/index'
				})
			},
			
			getMySignInfo: function(){
				uni.request({
				    url: this.$apiUrl+ '/api/my/sign-info',
					header: {
						'userId': uni.getStorageSync('userId'),
						'userToken': uni.getStorageSync('userToken'),
            'shopId': uni.getStorageSync('shopId')
					},
				    success: (res) => {
						let resData = res.data['data'];
						this.myName = resData.name;
						this.myPhone = resData.phone;
						this.myImgLogo = resData.img_logo;
						this.hasSignIn = resData.is_sign;
						this.signId = resData.sign_id;
						this.todayRank = resData.today_rank;
						this.signSum = resData.sign_sum;
						this.signListMy = resData.sign_list_my;
						this.signListRank = resData.sign_list_rank;
					}
				});
			},
			
			postSignIn: function() {
				if(this.hasSignIn == 1) {
					this.tui.toast('你已经签过到了');
					return;
				}
				
				uni.request({
					url: this.$apiUrl+ '/api/my/sign-today',
					header: {
						'userId': uni.getStorageSync('userId'),
						'userToken': uni.getStorageSync('userToken'),
            'shopId': uni.getStorageSync('shopId')
					},
					success: (res) => {
						let resErr = res.data['error'];
						let resMsg = res.data['msg'];
						if(resErr == 0) {
							let signId = res.data['data'];
							this.hasSignIn = 1;
							this.tui.toast("今日签到成功", 2000, true);
							setTimeout(() => {
								uni.navigateTo({
									url: '/pages/my-lottery/index?type=1&sign_id=' + signId
								});
							}, 2000);
							return false;
						}else{
							this.tui.toast(resMsg, 2000, false);
						}
					}
				});
			},
		},
		
		//页面加载的时候
		onLoad: function(options) {
			
		},
		
		//页面加载的时候
		onShow: function() {
			if(!uni.getStorageSync('hasLogin')) {
				uni.navigateTo({ url: '/pages/my/login' })
			}
			this.getMySignInfo();
		},
		
		onPullDownRefresh: function() {
		},
		
		onReachBottom: function() {
		},
	}	
</script>

<style>
	/*tabbar*/
	.tui-tabbar {width: 100%; position: fixed; display: flex;align-items: center;justify-content: space-between;z-index: 99999;background: #fff; height: 100rpx;left: 0;bottom: 0;padding-bottom: env(safe-area-inset-bottom);}
	.tui-safearea-bottom {width: 100%;height: env(safe-area-inset-bottom);}
	.tui-tabbar::before {content: ''; width: 100%; border-top: 1rpx solid #d9d9d9;position: absolute;top: 0;left: 0;-webkit-transform: scaleY(0.5);transform: scaleY(0.5);}
	.tui-tabbar-item {flex: 1;width: 25%;display: flex;align-items: center;flex-direction: column;justify-content: space-between;font-size: 24rpx;color: #666;height: 80rpx;}
	.tui-ptop-4 {padding-top: 4rpx;}
	.tui-scale {font-weight: bold;transform: scale(0.8);transform-origin: center 100%;line-height: 30rpx;}
	.tui-item-active {color: #e41f19 !important;}
	/*tabbar*/
	
	.container {padding-bottom: env(safe-area-inset-bottom);width: 750rpx;}
	.main-wrap{background: #fff;}
	
	.top-nav{display: flex;height: 140rpx;color: #fff;line-height: 140rpx;}
	.top-go-prev{width: 200rpx;font-size:20px;font-weight: bold;padding-left: 40rpx;}
	.top-title{width: 350rpx;font-size:16px;font-weight: bold;letter-spacing: 4px;text-align: center;}
	.top-go-next{width: 200rpx;}
	.top-go-next-img{width:120rpx;height:34rpx;float:right;margin-top:72rpx;}
	
	.my-info{width:100%;margin: 0 auto;}
	.my-img-logo{width: 156rpx;height: 156rpx;border-radius: 78rpx;margin: 0 auto;display: flex;}
	.my-name{color: #fff;text-align: center;line-height: 60rpx;padding-top: 20rpx;}
	
	.my-stat{display: flex;flex-direction:row; color: #fff;font-weight: bold;height:120rpx;margin:2rpx 150rpx;}
	.my-rank{width: 200rpx;height:120rpx;text-align: center;border-right: 2rpx solid #fff;}
	.my-cnt{width: 200rpx;height:120rpx;text-align: center;}
	.my-stat-tit{line-height: 66rpx;}
	.sign-btn{display: flex;flex-direction:row;height: 66rpx;width: 300rpx;margin: 40rpx auto;}

	.rank-title{text-align: center;font-size: 36rpx;}
	.rank-list{display: flex;flex-direction: row;width:700rpx;margin:0 auto;}
	.rank-num{width: 100rpx;}
	.rank-num-img{width: 48rpx;height: 60rpx;}
	.rank-logo{width: 120rpx;}
	.rank-logo-img{width:80rpx;height:80rpx;border-radius:40rpx;}
	.rank-name{width:330rpx;}
	.rank-total{width: 150rpx;display: flex;flex-direction: column;}
	.rank-key{font-size: 30rpx;color:#222;line-height: 60rpx;}
	.rank-key-top{font-size: 30rpx;font-weight:bold;color:#FD9746;line-height: 60rpx;}
	.rank-val{font-size: 26rpx;}
	
	
	
	.sign-list-tit{height: 100rpx;color: #fff;text-align:center;line-height: 100rpx;font: 18px;font-weight: bold;}
	.sign-list-item{height: 400rpx;width: 500rpx;margin:20rpx auto;}
	.sign-item{text-align: center;line-height: 70rpx;border-bottom: 2rpx solid #ccc;}
</style>